<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵感笔记 - 记录生活点滴</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- <style>
        .img {
            width: 100%;
            height: 50;
            max-width: 600px;
            margin-bottom: 20px;
            display: block;
        }
    </style> -->
</head>

<body class="bg-gray-50 text-gray-900 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-pen-nib text-blue-600 text-xl"></i>
                <span class="text-xl font-bold">灵感笔记</span>
            </div>
            <ul class="hidden md:flex space-x-8">
                <li><a href="#" class="hover:text-blue-600 transition">首页</a></li>
                <li><a href="#" class="hover:text-blue-600 transition">文章</a></li>
                <li><a href="#" class="hover:text-blue-600 transition">分类</a></li>
                <li><a href="#" class="hover:text-blue-600 transition">关于我</a></li>
            </ul>
            <div class="md:hidden">
                <i class="fas fa-bars text-xl"></i>
            </div>
        </div>
    </nav>

    <!-- 头部横幅 -->
    <header class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20 mb-12">
        <div class="max-w-4xl mx-auto text-center px-4">
            <img src="images/20250409103629_8939.jpg" alt="作者头像"
                class="w-32 h-32 rounded-full mx-auto object-cover mb-6 border-4 border-white">
            <h1 class="text-4xl font-bold mb-4">xxxx的博客</h1>
            <p class="text-xl opacity-90 mb-8">记录生活点滴，分享技术见解，探索创意世界</p>
            <div class="flex justify-center space-x-6">
                <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-2 rounded-full transition">
                    <i class="fas fa-rss mr-2"></i> 订阅
                </a>
                <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-2 rounded-full transition">
                    <i class="fas fa-envelope mr-2"></i> 联系
                </a>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="max-w-6xl mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 文章列表 -->
            <div class="lg:col-span-2">

                <article  class="bg-white rounded-lg shadow-md overflow-hidden mb-8 hover:shadow-lg transition">
                    <div id="list" style="margin-bottom: 5%;">

                    </div>
                    <!-- <div class="h-48 bg-gray-200 overflow-hidden">
                        <img src="https://yiyan.baidu.com/eb/shortLink/image/original?code=48j47hT" alt="文章封面"
                            class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-gray-500 text-sm mb-3">
                            <i class="fas fa-calendar mr-2"></i>
                            <span>2023年7月28日</span>
                            <span class="mx-2">•</span>
                            <i class="fas fa-folder mr-2"></i>
                            <span>生活</span>
                        </div>
                        <h2 class="text-2xl font-bold mb-3">徒步旅行的10个必备技巧</h2>
                        <p class="text-gray-600 mb-4">
                            作为一位热爱徒步的旅行者，我想分享这些年积累的实用技巧，帮助你更好地准备下一次户外探险...
                        </p>
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition">
                            阅读更多 <i class="fas fa-angle-right"></i>
                        </a>
                    </div> -->
                </article>

                <!-- 分页导航 -->
                <div class="flex justify-center">
                    <nav class="flex items-center space-x-2">
                        <a href="#" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                        <a href="#" class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition">1</a>
                        <a href="#" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">2</a>
                        <a href="#" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">3</a>
                        <a href="#" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                    </nav>
                </div>
            </div>

            <!-- 侧边栏 -->
            <aside class="lg:col-span-1 space-y-8">
                <!-- 关于作者 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-user-circle text-blue-600 mr-2"></i> 关于作者
                    </h3>
                    <img src="images/20250409103629_8939.jpg" alt="作者头像"
                        class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
                    <p class="text-gray-600 text-center mb-4">
                        全栈开发者 | 技术博主 | 摄影爱好者
                    </p>
                    <div class="flex justify-center space-x-4">
                        <a href="#" class="text-gray-500 hover:text-blue-600 transition">
                            <i class="fab fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-blue-600 transition">
                            <i class="fab fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-blue-600 transition">
                            <i class="fab fa-instagram text-xl"></i>
                        </a>
                    </div>
                </div>

                <!-- 分类目录 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-folder-open text-blue-600 mr-2"></i> 分类目录
                    </h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="flex justify-between hover:text-blue-600 transition">
                                <span>技术</span>
                                <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">24</span>
                            </a></li>
                        <li><a href="#" class="flex justify-between hover:text-blue-600 transition">
                                <span>生活</span>
                                <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">12</span>
                            </a></li>
                        <li><a href="#" class="flex justify-between hover:text-blue-600 transition">
                                <span>旅行</span>
                                <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">8</span>
                            </a></li>
                        <li><a href="#" class="flex justify-between hover:text-blue-600 transition">
                                <span>摄影</span>
                                <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">6</span>
                            </a></li>
                    </ul>
                </div>

                <!-- 标签云 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-tags text-blue-600 mr-2"></i> 热门标签
                    </h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="#"
                            class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-600 transition">
                            React
                        </a>
                        <a href="#"
                            class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-600 transition">
                            JavaScript
                        </a>
                        <a href="#"
                            class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-600 transition">
                            CSS
                        </a>
                        <a href="#"
                            class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-600 transition">
                            旅行攻略
                        </a>
                        <a href="#"
                            class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-600 transition">
                            摄影技巧
                        </a>
                        <a href="#"
                            class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-600 transition">
                            Web设计
                        </a>
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12 mt-16">
        <div class="max-w-6xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">关于灵感笔记</h3>
                    <p class="text-gray-400">
                        灵感笔记是一个分享技术见解和生活感悟的平台，致力于为读者提供有价值的内容和独特的视角。
                    </p>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">文章归档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">关于我</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">联系方式</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">订阅更新</h3>
                    <p class="text-gray-400 mb-4">
                        订阅我们的邮件列表，获取最新文章和独家内容
                    </p>
                    <form class="flex">
                        <input type="email" placeholder="输入您的邮箱"
                            class="px-4 py-2 rounded-l-md focus:outline-none w-full">
                        <button type="submit" class="bg-blue-600 px-4 py-2 rounded-r-md hover:bg-blue-700 transition">
                            订阅
                        </button>
                    </form>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 灵感笔记. 保留所有权利.</p>
            </div>
        </div>
    </footer>


    <script src="./jquery-3.7.1.min.js"></script>
    <script src="./js/common.js"></script> 
    <script>

        //1、获取数据请求
        $.ajax({
            type: "get",
            url: "/blog/getList",
            success: function (result) {
                console.log(result);
                if (result != null && result.code == 200 && result.data != null) {
                    let finalhtml = "";
                    for (var blog of result.data) {
                        // finalhtml += '<article class="bg-white rounded-lg shadow-md overflow-hidden mb-8 hover:shadow-lg transition">';
                        finalhtml += '<div class="h-48 bg-gray-200 overflow-hidden">';
                        finalhtml += '<img src=' + blog.imageUrl + '.jpg' + ' id="img"' + '>';
                        finalhtml += '</div>';
                        finalhtml += '<div class="p-6">' +
                            '<div class="flex items-center text-gray-500 text-sm mb-3">' +
                            '<i class="fas fa-calendar mr-2"></i>';
                        finalhtml += '<span>create_time: ' + blog.createTime + '</span>';
                        finalhtml += '<span class="mx-2">•</span>';
                        finalhtml += '<i class="fas fa-calendar mr-2"></i>';
                        finalhtml += '<span>update_time: ' + blog.updateTime + '</span>';
                        finalhtml += '<span class="mx-2">•</span>';
                        finalhtml += '<i class="fas fa-folder mr-2"></i>';
                        finalhtml += '<span class="text-blue-600">' + blog.blogType + '</span>';
                        finalhtml += '</div>';
                        finalhtml += '<h2 class="text-2xl font-bold mb-3">' + blog.title + '</h2>';
                        finalhtml += '<p class="text-gray-600 mb-4">' + blog.content + '</p>';
                        finalhtml += '<a href="details.html?blogId='+blog.id+'"';
                        finalhtml += 'class="text-blue-600 font-medium hover:text-blue-800 transition">阅读更多<i class="fas fa-angle-right"></i></a></div>';
                        // finalhtml += '</article>'; 
                    }
                    $("#list").html(finalhtml);
                }
            }
        });
    </script>
</body>

</html>